<template>
  <div class="compitem">
    <div class="compname">{{title}}</div>
    <!-- <el-input style="width:150px;" v-model="value"></el-input> -->

    <el-date-picker v-model="value[0]" style="width:150px;" type="date" @change="selectStart" placeholder="选择开始日期"></el-date-picker>
       <span style="padding:0 5px;">-</span>
    <el-date-picker v-model="value[1]" style="width:150px;" type="date" @change="selectEnd" placeholder="选择结束日期"></el-date-picker>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String
    },
    name: {
      type: String
    },
    val: {
      type: String
    }
  },
  data() {
    return {
      value: ["", ""],
      value1: ""
    };
  },
  created() {
    // this.value=this.val
    if (this.val) {
      var time = JSON.parse(this.val);
      this.value = [];
      time.forEach(element => {
        element = new Date(element * 1000);
        this.value.push(element);
      });
    }
  },
  methods: {
    change() {},
    selectEnd(e) {
      var start = new Date(this.value[0]).getTime() / 1000;
      var end = new Date(this.value[1]).getTime() / 1000;
      if (start > end) {
        this.value = [];
      }
    },
    selectStart(e) {
      var start = new Date(this.value[0]).getTime() / 1000;

      var end = new Date(this.value[1]).getTime() / 1000;
      if (start > end) {
        this.value = [];
      }
    }
  },
  watch: {
    value: function(params) {
      // console.log(this)
      // return
      // console.log("xxxxxxx")
      var arr = [];
      this.value.forEach(element => {
        if (element) {
          arr.push(new Date(element).getTime() / 1000);
        }
      });
      console.log(arr)
      this.$emit("func", { name: this.name, val: arr });
    }
  }
};
</script>
<style lang="scss" scoped>
.compitem {
  .compname {
    font-size: 14px;
    // padding: 0 15px;
    // padding-right: 15px;
    width: 90px;

  }
  width: 100%;
  display: flex;
  align-items: center;
}
</style>